<template>
  <div class="http-code clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">404</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            网页不存在
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">400</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器不理解请求
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">401</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            请求身份验证
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">403</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器拒绝请求
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">405</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            禁用请求中指定的方法
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">406</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            无法使用请求的内容特性响应请求的网页
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">410</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            表示请求的资源永久删除后
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">500</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器错误，无法完成请求
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">501</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器不具备完成请求的功能
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">502</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器作为网关或代理，上游服务器收到无效请求
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">503</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器目前无法使用，通常是暂时状态
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">200</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            服务器请求成功
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'HttpCode'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.http-code{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
